<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <!--引入Vue-->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div class="root">
</div>
</body>

<script type="text/javascript">
  let data = {
    name: '刘宇诚',
    address: '北京'
  }

  //创建一个监视的实例对象,用于监视data中属性变化
  const obs = new Observer(data)
  console.log(obs)

  // 准备一个vm实例
  let vm = {}
  vm._data = data = obs





  function Observer(obj) {
    // 汇总对象中所有的属性形成一个数组
    const keys = Object.keys(obj)
    // 遍历
    keys.forEach((k)=>{
      Object.defineProperty(this,k,{
        get(){
          return obj[k]
        },
        set(val){
          console.log(`${k}被改了,我要去解析模板,生成虚拟DOM...我要开始忙了`)
          obj[k] = val
        }
      })
    })
  }
</script>
</html>
